<template>
	<view class="container">
		<unicloud-db where="user_id==$cloudEnv_uid" ref="udb"
			v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList"
			field="name,mobile,region,address,is_default">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="data">
				<uni-list>
					<uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true" ellipsis="2"
						:showArrow="false">
						<template v-slot:header>
							<view @click="handleItemClick(item._id)" style="width: 600rpx;">

								<text class="name-font">
									<!-- 此处默认显示为_id，请根据需要自行修改为其他字段 -->
									<!-- 如果使用了联表查询，请参考生成的 admin 项目中 list.vue 页面 -->
									出售方: {{item.name }}
								</text>
								</br>
								<text class="address-font">详细地址:{{item.address}}</text>
							</view>
						</template>
						<template v-slot:footer>
							<view style="height: 40%;" @click="handleItemEdit(item._id)">

							</view>
							<view style="height: 60%;width: 50rpx;" @click="handleItemEdit(item._id)">
								<image class="slot-image" src="/static/address/edit.png"
									style="width: 40rpx;height: 40rpx;"></image>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		</unicloud-db>
		<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				collectionList: "uni-id-address",
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				}
			}
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		mounted() {
			this.$refs.udb.refresh()
		},
		methods: {
			handleItemClick(id) {
				console.log("handleItemClick");
				this.$store.commit('setAddressId', id)
				uni.navigateBack()
				/* 				uni.redirectTo({
									url: '/pages/order/order'
								}) */
			},
			handleItemEdit(id) {
				console.log("handleItemEdit");
				uni.navigateTo({
					url: './edit?id=' + id
				})
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.address-font {
		font-size: 34rpx;
		color: #8a8a8a;
		width: 700rpx;
	}

	.name-font {
		width: 90%;
		font-weight: bold;
	}
</style>